<template>
    <div>
        <swiper :options="swiperOption" ref="mySwiper">
            <!-- 幻灯内容 -->
            <swiper-slide v-for="(item,index) in listImg" :key="index" @mouseover.native="stopPlay" @mouseout.native="play">
              <img class="swiper-image" :src="item.url" alt="swiper-image">
            </swiper-slide>
            <!-- 以下控件元素均为可选 -->
            <!-- <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
            <div class="swiper-scrollbar"  slot="scrollbar"></div> -->
            <div class="swiper-pagination" slot="pagination"></div> 
        </swiper>
    </div>
</template>

<script>
  import {swiper,swiperSlide} from 'vue-awesome-swiper';
  export default {
    components:{swiper,swiperSlide},
      props:{
          listImg:{type:Array, default:[]}
      },
    data(){
        return{
            swiperOption: {
              // 所有配置均为可选（同Swiper配置） 
              notNextTick: false,
              autoplay: 6000,
              // spaceBetween: 30,
              grabCursor : true,
              setWrapperSize :true,
              autoHeight: true,
              pagination : '.swiper-pagination',
              paginationClickable :true,
              prevButton:'.swiper-button-prev',
              nextButton:'.swiper-button-next',
              scrollbar:'.swiper-scrollbar',
              mousewheelControl : true,
              observeParents:true,
              onTransitionStart(swiper){
              console.log(swiper)
              },
              onSlideChangeEnd:swiper=>{
                this.page=swiper.realIndex=1;
                this.index=swiper.realIndex;
              }
          }                    
        };        
    },
    computed: {
      swiper() {
      return this.$refs.mySwiper.swiper;
      }
    },
    mounted() {
      console.log("每次切换都会触发我");
      this.swiper.slideTo(2, 3000, true);
    },

    created(){
          // 取到路由带过来的参数, 将数据放在当前组件的数据内
          setTimeout(_ => {
            //  this.getPostInfo();
              //this.$message("postInfo:"+this.$route.params.id);
          }, 200);  
    },
    methods:{             
     stopPlay(){
        this.mySwiper.stopPlay();
     },
     play(){
        this.mySwiper.startPlay();
     },
     play(index){
        this.swiper.slideTo(index, 3000, true);
     }
    },
}
//   export default{
//     components:{swiper,swiperSlide},
//     data(){
//       return {


//     };
//   },


//    methods:{

//    }
// };
</script>
